<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />
    <!-- /子路由出口 -->
    <!-- 标签导航栏 -->
    <!--
      route: 开启路由模式
     -->
    <van-tabbar class="layout-tabbar" route>
      <van-tabbar-item to="/">
        <i slot="icon" class="toutiao toutiao-shouye1"></i>
        <span class="text">首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/qa">
        <i slot="icon" class="toutiao toutiao-sixin"></i>
        <span class="text">问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/mytext">
        <van-button icon="plus" type="primary" class="sharetext" />
      </van-tabbar-item>
      <van-tabbar-item to="/like">
        <i slot="icon" class="toutiao toutiao-shoucang1"></i>
        <span class="text">收藏</span>
      </van-tabbar-item>
      <van-tabbar-item to="/my">
        <i slot="icon" class="toutiao toutiao-wode1"></i>
        <span class="text">我的</span>
      </van-tabbar-item>
    </van-tabbar>
    <!-- /标签导航栏 -->
  </div>
</template>

<script>
export default {
  name: 'LayoutIndex'
}
</script>

<style scoped lang="less">
  .layout-container {
    .layout-tabbar {
      i.toutiao {
        font-size: 40px;
      }
      span.text {
        font-size: 20px;
      }
    }
  }
  .sharetext {
    border-radius: 20px;
    width: 70px;
    height: 70px;
    background-color: #d75f95;
    border: 0;
  }
</style>
